<template>
    <div id="app">
        <el-dialog
            title="签名"
            :visible.sync="dialogVisible"
            width="900px"
            :modal="false"
        >
            <div>
                <sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value" />
                <!-- <img v-if="value" class="view-image" :src="value" width="150" height="150" /> -->
            </div>  
            <div class="btnDiv">
                <el-button size="small" type="danger" @click="canvasClear()">清空</el-button>
                <el-button size="small" type="primary" @click="saveAsImg()">保存</el-button>
                <!-- <el-button size="small" type="success" @click="downloadSignImg()">下载</el-button> -->
            </div>      
        </el-dialog>
    </div>
</template>
<script>
    import uploadPic from "@/js/upload/UploadPic.js";
    import staticConst from "@/js/const/StaticConst.js";
    import SignCanvas from "sign-canvas";
    export default {
        components: { SignCanvas },
        props: ['uploadPicObj'],
        data() {
            return {
                value: null,
                options: {
                    isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
                    lastWriteSpeed: 1, //书写速度 [Number] 可选
                    lastWriteWidth: 2, //下笔的宽度 [Number] 可选
                    lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
                    lineJoin: "bevel", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
                    canvasWidth: 700, //canvas宽高 [Number] 可选
                    canvasHeight: 370, //高度  [Number] 可选
                    isShowBorder: true, //是否显示边框 [可选]
                    bgColor: "#FFFFFF", //背景色 [String] 可选
                    borderWidth: 1, // 网格线宽度  [Number] 可选
                    borderColor: "#333", //网格颜色  [String] 可选
                    writeWidth: 5, //基础轨迹宽度  [Number] 可选
                    maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
                    minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
                    writeColor: "#101010", // 轨迹颜色  [String] 可选
                    isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
                    imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
                },
                dialogVisible: false,
                base64Url: "", // 图片路径
            };
        },
        methods: {
            /**
             * 清除画板
             */
            canvasClear() {
                this.$refs.SignCanvas.canvasClear();
            },

            /**
             * 保存图片
             */
            saveAsImg() { //base64 上传oss服务器
                let that = this;
                let blob = "";
                let Unix = uni;
                const img = this.$refs.SignCanvas.saveAsImg();
                // this.base64Url = img;
                blob = uploadPic.dataURLtoBlob(img)
                uploadPic.idyun = this.uploadPicObj.idyun;
                uploadPic.activeId = this.uploadPicObj.activeId;
                uploadPic.type = staticConst.UPLOAD_INTER_ACTIVE;
                
                uploadPic.getSgin1(blob)
                uploadPic.uploadSussecc = uploadSuccess;
                function uploadSuccess(data)
                {
                    Unix.$emit('base64UrlEmit', data.url);
                    that.dialogVisible = false;
                }
            },

            /**
             * 下载图片
             */
            downloadSignImg() {
                this.$refs.SignCanvas.downloadSignImg();
            },
        },
    };
</script>
<style lang="scss" scoped>
    .title {
        padding: 20px;
        text-align: center;
    }
    .sign-canvas {
        display: block;
        margin: 20px auto;
    }
    .view-image {
        display: block;
        margin: 20px auto;
    }
    .config {
        width: 500px;
        margin: 20px auto;
        .ul-config {
            .li-c {
                display: flex;
                align-items: center;
                padding: 4px 10px;
                .item-label {
                    font-size: 14px;
                }
                .item-content {
                    margin-left: 10px;
                }
            }
        }
    }
    .sign-btns {
        display: flex;
        justify-content: space-between;
        #clear,
        #clear1,
        #save {
            display: inline-block;
            padding: 5px 10px;
            width: 76px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #eee;
            background: #e1e1e1;
            border-radius: 10px;
            text-align: center;
            margin: 20px auto;
            cursor: pointer;
        }
    }
    .btnDiv {
        width: 100%;
        display: flex;
        justify-content: center;
    }
</style>